import ReactDOM from 'react-dom'
import React from 'react'
import { connect }  from 'react-redux';

class WorkRemark extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    this.$textarea = $(ReactDOM.findDOMNode(this.refs.MessageKeyWord))
    this.$workAmount = $(ReactDOM.findDOMNode(this.refs.workAmount))
  }

  componentWillReceiveProps(props) {
    if (props.data) {
      this.setState({
        data: {
          remark: props.data.remark,
          pay_type: props.data.pay_type,
          gross_amount: props.data.gross_amount
        }
      })
    }
  }

  onDataSubmit() {
    if (confirm("确认类型以及金额吗?")) {
      var value = this.state.data.remark
      var pay_type = this.state.data.pay_type
      if ((pay_type == 10) && (!value || value.trim().length == 0)) {
        alert("线下付款请输入备注信息!")
        return
      }
      var amount = this.state.data.gross_amount
      if (pay_type == 20) {
        amount = 0
      }else if (pay_type == 15) {
        value = "月结"
      }
      if (!pay_type || pay_type == 5) {
        alert("请选择付款类型")
        return
      }
      if (isNaN(amount)) {
        alert("请输入正确的金额!")
        return
      }
      this.props.onPayOffline({
        work_order_id: this.props.data.id,
        remark: value,
        gross_amount: amount,
        pay_type: pay_type
      })
      this.$textarea.val("")
      this.$workAmount.val("")
      this.setState({
        data: {}
      })
    }
  }


  onChange(key, value) {
    var data = this.state.data;
    data[key] = value
    if (key == 'pay_type' && value == 20) {
      data.gross_amount = 0.0
    }
    this.setState({
      data: data
    })
  }


  renderFooter() {
    return (
      <div className="modal-footer">
        <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" className="btn btn-primary"
            onClick={(event)=> this.onDataSubmit()}>保存</button>
      </div>
    )
  }


  render() {
    var self = this;
    var pay_type = this.state.data.pay_type
    var amount = this.state.data.gross_amount
    if (pay_type == 20) {
      amount = 0
    }
    if (pay_type == 10) {
      pay_type = "线下付款"
    }else if (pay_type == 15) {
      pay_type = "月结"
    }
    else if (pay_type == 20) {
      pay_type = "免费"
    }
    else {
      pay_type = "付款类型"
    }

    return (
      <div className="modal fade" id="BillSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="bill-modal-label">备注</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="bill-year">金额</label>
                <input ref="workAmount" type="text" className="form-control" value = {amount}
                        placeholder="请输入金额" onChange={(event)=>this.onChange("gross_amount", $(event.target).val())}
                />
              </div>
              <div className="form-group">
                <label for="workUnit">付款类型</label>
                  <div>
                    <div className="btn-group">
                      <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span className="caret"></span>
                        <span>{pay_type || "付款类型"}</span>
                      </button>
                      <ul className="dropdown-menu" role="menu">
                        <li><a onClick={(event)=>this.onChange("pay_type", 10)}>线下付款</a></li>
                        <li><a onClick={(event)=>this.onChange("pay_type", 15)}>月结</a></li>
                        <li><a onClick={(event)=>this.onChange("pay_type", 20)}>免费</a></li>
                      </ul>
                    </div>
                  </div>
              </div>
              <div className="form-group">
                <label for="bill-year">备注</label>
                <textarea ref="MessageKeyWord" className="form-control work-textarea"
                           id="area" rows="10" value={this.state.data.remark || ""}
                           onChange={(event)=>this.onChange("remark", $(event.target).val())}></textarea>
              </div>

            </div>
            {self.renderFooter()}
          </div>
        </div>
      </div>
    )
  }
}


export default WorkRemark;
